<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>省市区</title>
  <script src="../G.js"></script>
  <style>
    * {
      font-size: 12px;
      color: #333;
    }

    .proviceTitle, .cityTitle, .areaTitle {
      width: 80px;
      height: 18px;
      line-height: 18px;
      padding-left: 5px;
      border: 1px solid #ddd;
      background: url("dropdown_bg-noborder._CB183808916_.gif") no-repeat right;
    }

    .hide {
      display: none;
    }

    .provice, .city, .area {
      float: left;
    }

    .city, .area {
      margin-left: 10px;
    }

    .proviceUl, .cityUl {
      list-style-type: none;
      position: absolute;
      top: 30px;
      left: -30px;
    }

    .areaUl{list-style-type: none; position: absolute; top:30px; left: 140px;} .cityUl {
      list-style-type: none;
      position: absolute;
      top: 30px;
      left: 70px;
    }

    .proviceUl li, .cityUl li, .areaUl li {
      float: left;
      width: 30px;
      height: 20px;
      color: #666;
    }
  </style>
</head>
<body>
<div class="provice">
  <div class="proviceTitle">请选择省</div>
  <div class="proviceCont hide">
    <ul class="proviceUl"></ul>
  </div>
</div>
<div class="city">
  <div class="cityTitle">请选择城市</div>
  <div class="cityCont hide">
    <ul class="cityUl"></ul>
  </div>
</div>
<div class="area">
  <div class="areaTitle">请选择区域</div>
  <div class="areaCont hide">
    <ul class="areaUl"></ul>
</div>
</div>
<script>
  arr = [
    {name:"安徽",child:[
        {name:"安庆",child:["全安庆","大观","桐城","迎江","宜秀","枞阳","怀宁","潜山","宿松","岳西","其他"]},
        {name:"合肥",child:["全合肥","蜀山","庐阳","包河","瑶海","经开","高新","新站","滨湖新区","北城新区","政务","合肥周边"]}
    ]
    },
    {
      name: "浙江", child: [
      {name:"杭州",child:["全杭州","西湖","拱墅","江干","下城","上城","余杭","萧山","滨江","建德","富阳","临安","桐庐","淳安","杭州周边"]},
      {name:"嘉兴",child:["全嘉兴","南湖","秀洲","经济开发区","平湖","海盐","嘉兴市区","桐乡","海宁","嘉善","嘉兴周边"]}
    ]
    }
  ];
  for (var i in arr) {
    $("<li>").appendTo($(".proviceUl")[0]).attr("value", i).html(arr[i].name);
  }

  $(".proviceTitle")[0].addEventListener("click", function (e) {
    $(".proviceCont")[0].removeClass("hide");
  }, false);

  $(".proviceUl")[0].addEventListener("click", function (e) {
    if (e.target.tagName.toLowerCase() == "li") {
      $(".proviceTitle")[0].html(e.target.html());
      $(".proviceCont")[0].addClass("hide");
    }
    $(".cityUl")[0].html("");
    for (var i in arr[e.target.value].child) {
      $("<li>").appendTo($(".cityUl")[0]).attr("value", i).html(arr[e.target.value].child[i].name);
    }
    $(".cityCont")[0].removeClass("hide");
  }, false);

  $(".provice")[0].addEventListener("click", function (e) {
    e.stopPropagation();
  }, false)
  $(".city")[0].addEventListener("click", function (e) {
    e.stopPropagation();
  }, false)
  $(".area")[0].addEventListener("click", function (e) {
    e.stopPropagation();
  }, false)
  document.addEventListener("click", function () {
    $(".proviceCont")[0].addClass("hide");
  });

  $(".cityUl")[0].addEventListener("click", function (e) {
    if (e.target.tagName.toLowerCase() == "li") {
      $(".cityTitle")[0].html(e.target.html());
      $(".cityCont")[0].addClass("hide");
    }
    $(".areaUl")[0].html("");
    var valuePro = $(".proviceTitle")[0].html();
    for(var i =0 ;i<arr.length && arr[i].name != valuePro;i++);
    for (var j in arr[i].child[e.target.value].child) {
      $("<li>").appendTo($(".areaUl")[0]).attr("value", j).html(arr[i].child[e.target.value].child[j]);
    }
    $(".areaCont")[0].removeClass("hide");
  }, false);

  $(".cityTitle")[0].addEventListener("click", function () {
    $(".cityCont")[0].removeClass("hide");
  }, false);

  $(".areaCont")[0].addEventListener("click", function (e) {
    if (e.target.tagName.toLowerCase() == "li") {
      $(".areaTitle")[0].html(e.target.html());
      $(".areaCont")[0].addClass("hide");
    }
  })

  $(".areaTitle")[0].addEventListener("click",function(){
    $(".areaCont")[0].removeClass("hide");
  },false);
</script>
</body>
